/**
 * @name ImageGrid
 * @desc 图片拼图
 */

import Taro from "@tarojs/taro"
import { View, Image } from "@tarojs/components"

import "./styles.less"

class ImageGrid extends Taro.Component {
    static defaultProps = {
        images: null,
        onImageClick: (imageIndex, images) => {}
    }

    state = { imageList: [] }

    componentWillMount() {
        this.computedImageList()
    }

    computedImageList() {
        // 重新计算每张图片排版的样式
        if (!this.props.images) {
            return false
        }

        const imageList = this.props.images.map((v, i) => {
            return { ...v, className: `image-grid__image-group--${this.props.images.length}-${i + 1}` }
        })
        this.setState({ imageList })
    }

    render() {
        const { images, onImageClick } = this.props
        const { imageList } = this.state

        return (
            <View className="image-grid">
                {imageList.map((v, i) => (
                    <Image
                        key={v.id}
                        src={v.path}
                        lazyLoad={true}
                        className={v.className}
                        mode="aspectFill"
                        onClick={onImageClick.bind(this, i, images)}
                    />
                ))}
            </View>
        )
    }
}

export { ImageGrid }
